<template>
  <div>
    <!--图片列表-->
    <van-grid :gutter="gutterNum" clickable :column-num="columnNum">
      <van-grid-item v-for="(pic, i) in data" :key="i" @click="onPreview(i)">
        <van-image :src="pic"/>
      </van-grid-item>
    </van-grid>
    <!--图片预览-->
    <van-image-preview v-model="showPreview" :images="data" @change="onChange">
      <p slot="index">第{{ index + 1 }}页</p>
    </van-image-preview>
  </div>
</template>

<script>
export default {
  name: 'imageList',
  props: {
    data: Array, // 商品列表
    gutterNum: Number, // 商品和商品之间的间距 px
    columnNum: Number // 商品列数
  },
  data () {
    return {
      showPreview: false, // 图片预览弹框显示标志位
      index: 0 // 当前预览图片索引
    }
  },
  methods: {
    /**
     * 图片预览
     */
    onPreview (index) {
      this.index = index
      this.showPreview = true
    },
    /**
     * 图片预览滑动事件
     */
    onChange (index) {
      this.index = index
    }
  }
}
</script>

<style lang="less">
</style>
